<template>
        <div class="album" v-if="albumList?.length">
            <!-- <div class="albumtop">
                <div class="albumtitle">'{{keyword}}'&nbsp;&nbsp;相关的专辑</div>
                <div class="albummore">更多 ></div>
            </div> -->
            <div class="albumcontent">
                <div class="albumitem" v-for="(item,index) in albumList" :key="index" 
                @click="routerHandler('album',item.albumInfo.id)">
                    <img class="albumimg" :src="item.albumInfo?.cover_path" alt="">
                    <div class="content">
                        <div class="title">{{ item.albumInfo?.title}}</div>
                        <div class="albumintro">{{ item.albumInfo?.intro}}</div>
                        <div class="contentbottom">
                            <div class="name">
                                <van-icon name="manager-o" class="manage"/>
                                <span class="nickname">{{ item.albumInfo?.nickname}}</span>
                            </div>
                            <div class="num">
                                <div class="iconfont icon-sound-wave"></div>
                                <span class="no">{{ item.albumInfo?.tracks}}</span>
                            </div>
                            <div class="play">
                                <van-icon name="audio" class="audio"/>
                                <span class="playnum">{{ simplifyNum(item.albumInfo?.play)}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


</template>

<script setup lang="ts">
import {onMounted, ref, onBeforeUnmount,watch, onUpdated} from 'vue'
import {reqAlbumList, type albumInfoModel} from '../../api/search'
import { useRouter } from "vue-router";



const router = useRouter()
const props = defineProps(['keyword'])

const value = ref(props.keyword)
watch(() => props.keyword,(nval) => {
    // console.log(nval);
    value.value = nval
    albumList.value = []
    getAlbumList()
},{deep:true})
// 单位转换
function simplifyNum(number: number) {
  let str_num = 0;
  if (number >= 1e4 && number < 1e8) {
    str_num = number / 1e4;
    return str_num.toFixed(2) + "万";
  } else if (number >= 1e8 && number < 1e10) {
    str_num = number / 1e8;
    return str_num.toFixed(2) + "亿";
  } else {
    //一千以下
    return number;
  }
}


onMounted(() => {
    // kw.value = props.keyword
    getAlbumList()
    window.addEventListener('scroll', handleScroll, true);
})

onBeforeUnmount(() => {
    window.removeEventListener('scroll', handleScroll, true);
    albumList.value = []
})

function handleScroll() {
    //scrollTop  【滚动条顶部】距离【页面】顶部的距离
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    //windowHeight  视口高度
    const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //scrollHeight  可滚动的总高度
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    //滚动条到底部的条件
    if (scrollTop + windowHeight >= scrollHeight-30) {
        if (more) {
            page.value++;
            getAlbumList()
        }
    }
}



const albumList = ref<albumInfoModel[]>([])
const page = ref<number>(1)
const more = ref<number>(1)
const getAlbumList = async () => {
    // console.log('==',value.value);
    let res = await reqAlbumList(value.value,page.value)
    // let res = await reqAlbumList(props.keyword,page.value)
    if (res.data.albumViews.pageSize===20) {
        more.value = 1
    }else {
        more.value = 0
    }
    albumList.value.push(...res.data.albumViews.albums)
}

// 路由跳转事件
const routerHandler = (type:string,id:number) => {
  router.push(`/${type}/${id}`)
}
</script>

<style scoped lang="scss">
    .album {
        width: 375px;
        box-sizing: border-box;
        
        .albumtop {
            margin: 12px 12px 0 12px;
            display: flex;
            justify-content: space-between;
            padding: 12px 15px 0px;
            .albumtitle {
                font-size: 18px;
                color: #40404c;
            }
            .albummore {
                font-size: 12px;
                color: #aaa;
            }
        }
        .albumcontent {
            .albumitem {
                padding: 8px 10px 8px 20px;
                display: flex;
                border-bottom: 1px solid #e1e1e1;
                .albumimg {
                    width: 70px;
                    height: 70px;
                    border-radius: 4px;
                    margin-right: 15px;
                }
                .content {
                    width: 260px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    margin: 0 10px;
                    .title {
                        font-size: 16px;
                        color: #333;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }
                    .albumintro {
                        font-size: 13px;
                        color: #999;
                        padding: 5px 0 7px;
                    }
                    .contentbottom {
                        display: flex;
                        align-items: center;
                        color: #999;
                        font-size: 11px;
                        height: 20px;
                        line-height: 20px;
                        .name {
                            display: flex;
                            align-items: center;
                            .nickname {
                                margin-left: 5px;
                            }
                            .manage {
                                font-size: 13px;
                            }
                        }
                        .num {
                            display: flex;
                            align-items: center;
                            margin: 0 25px 0 10px;
                            .no {
                                margin-left: 5px;
                            }
                            .icon-sound-wave {
                                color: #999;
                                font-size: 17px;
                            }
                        }
                        .play {
                            display: flex;
                            align-items: center;
                            .playnum {
                                margin-left: 5px;
                            }
                            .audio {
                                font-size: 15px;
                            }
                        }
                    }
                }
                .icon-icon-video-play-fill {
                    color: #a3a3ac;
                    font-size: 26px;
                }
            }
        }
    }
</style>